import { Viewer } from "@bytemd/react";
import highlight from "@bytemd/plugin-highlight";
import "highlight.js/styles/vs2015.min.css";
import "bytemd/dist/index.css";
import style from "./detail.module.scss";
import { useArticleDetail } from "./hooks/useArticleDetail";
import { Space, Spin, Tag } from "antd";
const plugins = [highlight()];
export default function ArticleDetailPage() {
  const { articleInfo, loading } = useArticleDetail();
  return (
    <div className={style.detailPage}>
      <Spin spinning={loading}>
        <h1>{articleInfo.title}</h1>
        {articleInfo.thumbnail && (
          <img src={articleInfo.thumbnail} className={style.coverBox} />
        )}
        <div className="flex">
          <Space wrap size={20}>
            <div className="card-item">
              <div className="label">分类:</div>
              <div className="content">{articleInfo.categoryName}</div>
            </div>
            <div className="card-item">
              <div className="label">标签:</div>
              <div className="content">
                {articleInfo.tagList &&
                  articleInfo.tagList.map((item) => (
                    <Tag key={item.tagId}>{item.tagName}</Tag>
                  ))}
              </div>
            </div>
          </Space>

          <Space wrap size={20}>
            <div className="card-item">
              <div className="label">置顶:</div>
              <div className="content">
                {articleInfo.isTop === "0" ? "置顶" : "不置顶"}
              </div>
            </div>
            <div className="card-item">
              <div className="label">评论:</div>
              <div className="content">
                {articleInfo.isComment === "0" ? "允许评论" : "不允许评论"}
              </div>
            </div>
            <div className="card-item">
              <div className="label">状态:</div>
              <div className="content">
                {["已发布", "草稿"][Number(articleInfo.status)]}
              </div>
            </div>
          </Space>
          <Space wrap size={20}>
            <div className="card-item">
              <div className="label">点赞</div>
              <div className="content">{articleInfo.star}</div>
            </div>
            <div className="card-item">
              <div className="label">热度</div>
              <div className="content">{articleInfo.viewCount}</div>
            </div>
            <div className="card-item">
              <div className="label">创建时间</div>
              <div className="content">{articleInfo.createTime}</div>
            </div>
          </Space>
        </div>

        <p className={style.sumaryBox}>{articleInfo.summary}</p>
        <Viewer value={articleInfo.content || ""} plugins={plugins} />
      </Spin>
    </div>
  );
}
